{% macro gridWidth(gridTable, pager) %}
    var grid_selector = "#{{ gridTable is empty ? 'grid-table' : gridTable }}";
    var pager_selector = "#{{ pager is empty ? 'grid-pager' : pager }}";
    $(window).on('resize.jqGrid', function () {
        $(grid_selector).jqGrid( 'setGridWidth', $("#main-container").width()-17);
    });
{% endmacro %}

{% macro gridNav(edit,add,del,search,refresh,view,addUrl,editUrl,deleteMsg) %}
    $(window).triggerHandler('resize.jqGrid');//触发resize.jagrid事件；
    //navButtons prmEdit, prmAdd, prmDel, prmSearch, prmView 按钮顺序
    jQuery(grid_selector).jqGrid('navGrid',pager_selector,
    {
        //导航按钮
        edit: '{{ edit is empty ? false : true }}',
        add: '{{ add is empty ? false : true }}',
        del: '{{ del is empty ? false : true }}',
        delicon : 'ace-icon fa fa-trash-o red',
        search: '{{ search is empty ? false : true }}',
        refresh: '{{ refresh is empty ? false : true }}',
        refreshicon : 'ace-icon fa fa-refresh green',
        view: '{{ view is empty ? false : true }}',
        viewicon : 'ace-icon fa fa-search-plus grey'
    },
    {},
    {},
    {
        //删除表单
        recreateForm: true,
        left:540,
        top:256,
        beforeShowForm : function(e) {
        var form = $(e[0]);
        if(form.data('styled')) return false;
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
        style_delete_form(form);
        form.data('styled', true);
        },
        afterSubmit: afterDeleteCallback
    },
    {},
    {
        //查看表单；
        recreateForm: true,
        beforeShowForm: function(e){
        var form = $(e[0]);
        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
    }
    }
    )
    {% if addUrl is not empty %}
        jQuery(grid_selector).jqGrid('navGrid',pager_selector).navButtonAdd(pager_selector,{caption:'',title:'{{ 'Add'|trans }}',buttonicon:'ace-icon fa fa-plus-circle purple',onClickButton:function(){
        location.href='{{ addUrl }}';  //自定义添加按钮
        }});
    {% endif %}
    function afterDeleteCallback(response, postdata) {
        //删除后执行函数
        var res = eval('('+response.responseText+')');
            $.gritter.add({
            title: '{{ 'Prompt'|trans }}',
            text: res.message,
            class_name: res.error ? 'gritter-error' : 'gritter-success'
        });
        return [res.message];
    }
    //处理表单样式；
    function style_delete_form(form) {
        var buttons = form.next().find('.EditButton .fm-button');
        buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
        buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
        buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
    }
    //删除前；
    function beforeDeleteCallback(e) {
        var form = $(e[0]);
        if(form.data('styled')) return false;
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
        {% if not(deleteMsg is empty) %}
            form.closest('.ui-jqdialog').find('.delmsg').html("{{ deleteMsg }}")
        {% endif %}
        style_delete_form(form);
        form.data('styled', true);
    }
    //编辑前触发函数
    {% if not(editUrl is empty) %}
        function beforeEditCallback(e){
            var form = $(e[0]);
            var id = form[0].id.value;
            //console.log(form[0].id.value);
            window.location.href = "{{ editUrl }}?id="+id;
        }
    {% endif %}
    //修改分页图标
    function updatePagerIcons(table) {
        var replacement =
        {
            'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
            'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
            'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
            'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
        };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
        })
    }
{% endmacro %}

{#注意有分页的时候才不用传ispage#}
{% macro gridConfig(ispage,rowNum,pageList) %}
    mtype: 'POST',
    datatype: "json", //从服务器端返回的数据类型，默认xml：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
    viewrecords : true, //定义是否要显示总记录数
    rowNum: {{ rowNum is empty ? 10 : rowNum }},  //默认每页显示多少条数据
    rowList: {{ ispage is empty ? (pageList is empty ? '[10,20,30,50,100]' : pagelist) : 'false' }}, //每页显示几条数据下拉框的选项
    pager : pager_selector, //翻页工具对象
    pgbuttons: {{ ispage is empty ? 'true' : 'false' }},
    pginput: {{ ispage is empty ? 'true' : 'false' }},
    height: 'auto',
    sortorder: 'desc',
    altRows: true,  //表格间隔底色
    rownumbers:true,
    multiselect: true,  //是否可以多选
    {% if ispage is empty %}
        loadComplete: function() {
            var table = this;
            setTimeout(function(){
            updatePagerIcons(table);
            }, 0);
        },
    {% endif %}
{% endmacro %}

{% macro gridKeyword(title, message, types, sound) %}
        <div class="widget-container-col">
            <div class="widget-box" style="margin: 3px 0px 10px 0" id="tableWidth">
                <!-- /section:custom/widget-box.options -->
                <div class="widget-body">
                    <div class="widget-main">
                        <form class="form-inline" id="searchForm">
                            <div class="form-group">
                                <label for="keyword">{{ title }}: </label>
                                <input type="text" class="form-control input-sm" id="keyword"
                                        {% if message is not empty %}
                                    data-rel="tooltip" title="{{ message }}" data-placement="bottom" data-original-title="{{ message }}"
                                        {% endif %}>&nbsp;&nbsp;
                                {% if types is not empty %}
                                    <select id="select_type">
                                        {% for key,type in types %}
                                            <option value="{{ key }}">{{ type }}</option>
                                        {% endfor %}
                                    </select>
                                {%  endif %}
                            </div>
                            <button id="loading-btn" type="button" class="btn btn-sm btn-info" data-loading-text="Loading...">
                                <i class="ace-icon fa fa-search"></i>{{ 'Inquiry'|trans }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
{% endmacro %}

{% macro formInline(actions) %}
    <div class="widget-container-col">
        <div class="widget-box" style="margin: 3px 0px 10px 0" id="tableWidth">
            <div class="widget-body">
                <div class="widget-main">
                    <form class="form-inline" role="form" action="javascript:search()" method="post" id="searchForm">
                    {% for key,action in actions %}
                        {% if action.type != 3 %}
                            <div class="form-group">
                                <label for="{{ key }}">{{ action.text|trans }}:</label>
                            {% if action.type == 1 %}
                                <input type="text" id="{{ key }}" name='{{ key }}' placeholder="{% if action.help is defined %}{{ action.help|trans }}{% endif %}" class="form-control input-sm" />
                            {% elseif action.type == 2 %}
                                <select id="{{ key }}" name="{{ key }}" class="form-control input-sm">
                                    {% if action.notice is defined and action.notice == false %}
                                    {% else %}
                                        <option value="">{{ 'please select'|trans }}</option>
                                    {% endif %}

                                    {% for opKey,option in action.options %}
                                        <option value="{{ opKey }}" {% if action.selected is defined and opKey == action.selected %}selected{% endif %}>{{ option }}</option>
                                    {% endfor %}
                                </select>
                            {% endif %}
                            </div>
                        {% else %}
                            <div class="form-group">
                                <div class="col-sm-12">
                                    {{ action.text|trans }}:&nbsp;<input type="text" class="form-control input-sm" id="{{ key }}" placeholder="{% if action.help is defined %}{{ action.help|trans }}{% endif %}" name="type3" value="{{ action.value }}">
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                        <button id="loading-btn" type="submit" class="btn btn-sm btn-info" data-loading-text="Loading...">
                            <i class="ace-icon fa fa-search"></i>{{ 'Inquiry'|trans }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro sendKeyWord(name) %}
    jQuery(function($) {
        $('#loading-btn').on(ace.click_event, btnSerach);
        $('#searchForm').on('submit', btnSerach);
    })
    function btnSerach(){
        //可以开始获取值进行查询
        var keyword = $('#keyword').val();
        var filter = new Object();
        filter.{{ name is empty ? 'keyword':name }} = keyword;
        if ($('#select_type').length != 0) {
            var sound_type = $("#select_type").val();
            filter.select_type = sound_type;
        }
        var str = jsonToString(filter);
        var arr = {'fliter':str};
        $('#grid-table').setGridParam({postData:arr}).trigger("reloadGrid");
        return false;
    }
{% endmacro %}

{% macro configForAdsSearch() %}
    pginput:false,
    onPaging:function (pgButton) {
        var firstId = $('#grid-table tr:first').next().attr('id');
        var lastId = $("#grid-table tr:last").attr('id');

        if (typeof firstId == 'undefined') {
            firstId = 0;
        }
        if (typeof lastId == 'undefined') {
            lastId = 0;
        }

        var data = {};
        data.pgButton = pgButton;
        data.firstId = firstId;
        data.lastId = lastId;
        $('#grid-table').setGridParam({postData:{param:jsonToString(getCondition()),forPage:jsonToString(data)}});
    }
{% endmacro %}